<!doctype html>
<html lang="zh-CN">
<head>
    <style>
        /* 自定义悬浮入口的位置 */
        #position_demo {
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<h1>Hello World</h1>
<div id="position_demo"></div>
    <script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js"></script>
    <script>
    new CozeWebSDK.WebChatClient({
  /**
  * 机器人或应用设置
  * 对于机器人：
  * @param config.bot_id - 机器人ID
  * 对于应用：
  * @param config.type - 要集成Coze应用，必须将值设置为app
  * @param config.appInfo.appId - AI应用ID
  * @param config.appInfo.workflowId - 工作流或聊天流ID
  */
  config: {
    bot_id: '7533435355358412836',
  },
  /**
  * auth属性用于配置认证方式
  * @param type - 认证方式，默认类型为'unauth'，表示无需认证；建议设置为'token'，表示通过PAT（个人访问令牌）或OAuth进行认证
  * @param token - 当类型设置为'token'时，需要配置PAT（个人访问令牌）或OAuth访问密钥
  * @param onRefreshToken - 当访问密钥过期时，可以根据需要设置新的密钥
  */
  auth: { 
    type: 'token',
    token: 'pat_6FbrICPeQsMwzT3NUX5QvTtdAyyM7w31LyneoVs2qSW9tZu6U9grwl6s6xNhemd9', 
    onRefreshToken: async () => '', 
  }, 
  /**
  * userInfo参数用于设置聊天框中机器人用户信息的显示
  * @param userInfo.id - 机器人用户的ID
  * @param userInfo.url - 用户头像的URL地址
  * @param userInfo.nickname - 机器人用户的昵称
  */
  userInfo: { 
    id: 'user', 
    url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png', 
    nickname: '用户A', 
  }, 
  ui: { 
    /**
    * ui.base参数用于设置聊天窗口的整体UI效果
    * @param base.icon - 应用图标URL
    * @param base.layout - 机器人聊天框窗口的布局样式，可设置为'pc'或'mobile'
    * @param base.lang - 机器人的系统语言，可设置为'en'或'zh-CN'
    * @param base.zIndex - 聊天框的z-index值
    */
    base: { 
      //icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png', 
	  icon: 'http://127.0.0.1:5000/static/bot01.png',
      layout: 'pc', 
      lang: 'zh-CN',
      zIndex: 1000, 
    },
    /**
    * 控制聊天框的UI和基础能力
    * @param chatBot.title - 聊天框的标题
    * @param chatBot.uploadable - 是否支持文件上传
    * @param chatBot.width - PC端机器人窗口的宽度，单位为px，默认为460
    * @param chatBot.el - 设置聊天框放置位置的容器（元素）
    */
    chatBot: {
      title: '扣子小助手',
      uploadable: true,
      width: 390
    }, 
    /**
    * 控制是否在页面右下角显示悬浮按钮
    */
    asstBtn: { 
      isNeed: true, 
    }, 
    /**
    * ui.footer参数用于设置聊天窗口的底部信息
    * @param footer.isShow - 是否显示底部版权模块
    * @param footer.expressionText - 底部显示的文本信息
    * @param footer.linkvars - 底部链接文本和链接地址
    */
    footer: { 
      isShow: true, 
      expressionText: '版权所有--河北机电学院', 
      linkvars: { 
        name: { 
          text: '扣子', 
          link: 'https://www.coze.cn/' 
        }
      } 
    } 
  },
});
</script>
</body>
</html>